<template>
  <div class="main-content" >
    <p class="front-title">店铺信息</p>
    <div class="front-content">
      <el-col :span="8" v-for="item in merchantData">
        <img :src="item.avatar" class="recommend-img" @click="navToDetail(item.id)">
        <p>{{ item.name }}</p>
        <p class="front-content-address"><i class="el-icon-place"></i> {{ item.address }}</p>
      </el-col>

    </div>
    <div  style="margin-top: 20px">
      <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>

import request from "@/utils/request";


export default {
  data() {
    return {
      pageNum:1,
      pageSize:6,
      total:0,
      merchantData:[],
    }
  },
  mounted() {
    this.loadData()
  },
  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {
    loadData(){
      request.get("/merchant/selectPage",{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,
        }
      }).then(res=>{
        if (res.code==='0'){
          console.log(res.data)
          this.merchantData=res.data.list
          this.total=res.data.total
        }

      })
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.loadData()
    },
    navToDetail(id){
      this.$router.push({name:"MerchantDetail",query:{id:id}})
    }

  }
}
</script>
<style>

</style>